<template>
	<view class="box">
		<view class="player-box">
			<image class="player-round" :src="page_data.img"></image>
			<view class="player-text">
				<view class="player-name">{{page_data.name}}</view>
				<view class="player-author">{{page_data.author}}</view>
			</view>
			<view class="palyer-control">
				<image class="stop-music" src="../../static/stop.png" v-if="!control_play" @click="controlPlay"></image>
				<image class="play-music" src="../../static/play.png" v-if="control_play" @click="controlPause"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onUnmounted} from 'vue'
	import { ref } from 'vue';
	import { defineProps } from 'vue';
	
	const app = getApp()
	const props = defineProps({
	  page_data: Object,
	})
	var control_play = ref(true)
	var control_close = true                              
	const innerAudioContext = wx.createInnerAudioContext();
	const musicInit= ()=>{
		innerAudioContext.src = props.page_data.music_song;
		innerAudioContext.play();
	}
	const controlPause = ()=>{
		control_play.value = !control_play.value
		innerAudioContext.pause();
	}
	const controlPlay = ()=>{
		control_play.value = !control_play.value
		innerAudioContext.play();
	}
	const toclose =()=>{
	}
	musicInit()
	
	onUnmounted(()=>{
		innerAudioContext.destroy()
	})
</script>

<style>
	.box{
		height: 120rpx;
		width: 100%;
		position: fixed;
		bottom: 120rpx;
	}
	.player-box{
		margin-top: 10rpx;
		height: 110rpx;
		width: 100%;
		display: flex;
		background-color: #d9f5eb;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	.player-round{
		margin-left: 60rpx;
		margin-top: -10rpx;
		width: 108rpx;
		height: 108rpx;
		border-radius:50%;
		background-color: aqua;
		animation:circleRoate 7s infinite linear;
	}
	.player-text{
		margin-left: 40rpx;
		font-size: 30rpx;
		width: 360rpx;
	}
	.player-name{
		margin-top: 10rpx;
		letter-spacing:4rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.player-author{
		margin-top: 10rpx;
		letter-spacing:2rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.palyer-control{
		width: 50rpx;
		height: 50rpx;
		margin-top: 30rpx;
		margin-left: 70rpx;
	}
	.play-music{
		width: 50rpx;
		height: 50rpx;
	}
	.stop-music{
		width: 50rpx;
		height: 50rpx;
	}
	.close-music{
		margin-top: 30rpx;
		width: 50rpx;
		height: 50rpx;
		margin-left: 40rpx;
	}
	
	 @keyframes circleRoate{  
	        from{transform: rotate(0deg);}
	        to{transform: rotate(360deg);}
	    }  
</style>
